<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="660px" v-if="visible" append-to-body
      :close-on-click-modal="false" :loading="loading">
      <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" v-loading='loading'>
        <el-form-item label="" prop="">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
          </el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="saveLoading" @click="submitForm">确 认</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getUserAreaList,
    editUserArea
  } from "@/api/setting";
  export default {
    // dicts: ['asset_card_type'],
    name: "regionDialog",
    data() {
      return {
        labelWidth: '120px',
        inputWidth: '280px',
        loading: false,
        id: '', //
        saveLoading: false,
        // 是否禁用
        disabled: false,
        stopDisabled: true,
        // 弹出层标题
        title: "配置区域",
        // 是否显示弹出层
        visible: false,
        //数组
        options: [],
        // 表单参数
        form: {
          roleAreaList: [], //角色选中区域id
          roleId: '', //角色id
        },
        // 表单校验
        rules: {

        },
        checkAll: false,
        checkedCities: [], //选中
        cities: [],
        isIndeterminate: true, //设置 indeterminate 状态，只负责样式控制	
        roleList: [],
      };
    },
    created() {

    },
    methods: {
      /** 打开发行管理弹框 */
      open(id) {
        this.reset();
        this.form.roleId = id
        this.getUserAreaSelect()
        this.visible = true

      },
      // 取消按钮
      cancel() {
        this.visible = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.saveLoading = false
        this.form = {
          roleAreaList: [], //角色选中区域id
          roleId: '', //角色id
        }
      },
      getUserAreaSelect() { //获取区域
        this.loading = true
        getUserAreaList(this.form.roleId).then(res => {
          setTimeout(() => {
            this.loading = false
          }, 500)
          this.roleList = res.result.areaList
          this.cities = res.result.areaList.map(item => { //全部区域处理
            return item.name;
          })
          let list = []
          console.log('this.roleList', this.roleList)
          console.log(res.result.roleAreaList)
          if (res.result.roleAreaList.length != 0) { //区域回显处理
            this.roleList.forEach((item) => {
              res.result.roleAreaList.forEach((items) => {
                if (item.id == items) {
                  list.push(item.name)
                  this.checkedCities = list
                }
              })
            })
          }else{
            this.checkedCities = []
          }
          if (res.result.areaList.length == res.result.roleAreaList.length) {
            this.checkAll = true
            this.isIndeterminate = true
          }
          console.log(this.checkedCitie)
        }).catch(() => {
          this.loading = false
        })
      },
      handleCheckAllChange(val) { //全选
        console.log(val)
        let cityOptions = this.cities
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      /** 提交按钮 */
      submitForm() {
        let list = []
        this.roleList.forEach((item) => {
          this.checkedCities.forEach((items) => {
            if (item.name == items) {
              list.push(item.id)
            }
          })
        })
        this.form.roleAreaList = list
        if (this.form.roleAreaList.length == 0) {
          this.$message.error('请选择区域');
          return
        }
        this.saveLoading = true
        editUserArea(this.form).then(res => {
          this.$message.success('操作成功');
          this.cancel();
          this.$emit('refresh')
          this.saveLoading = false
        }).catch(() => {
          this.saveLoading = false
        })
      },
    }
  };

</script>
<style scoped>
  .img_box {
    width: 100px;
    height: 70px;
    border-radius: 4px;
  }

  .flex {
    display: flex;
    align-items: center;
  }

</style>
